<template>
    <div ref="ref" style="height: 395px">
        <div class="thumb-example" v-if="this.specImages.length > 0">
            <div class="product-intro">
                <div class="preview-wrap">
                    <div class="leftArrow">
                        <!-- <img src="@/assets/mySwiper/left.png" @click="arrowClick('left')" /> -->
                        <svg-icon class="swpleft" style="font-size: 24px" icon-file-name="swpleft" @click="arrowClick('left', -1)" />
                    </div>
                    <!-- 轮播图 -->
                    <el-carousel indicator-position="outside" arrow="never" ref="cardShow" trigger="click" :autoplay="autoplay" @change="getVidDur">
                        <el-carousel-item v-for="(item, index) in specImages" :key="index">
                            <div v-if="item.type === 2">
                                <video
                                    id="myVideo"
                                    class="myVideo"
                                    :src="item.url"
                                    controls
                                    onplay="handleplay()"
                                    onpause="handlepause()"
                                    onended="handleended()"
                                    ondurationchange="handledurationchange()"
                                    oncanplay="handleoncanplay()"
                                    style="width: 100%"
                                ></video>
                                <div class="prism-big-play-btn animated fadeIn" onclick="handleplay()"></div>
                                <!-- <div class="" onclick="handlepause()"></div> -->
                                <div class="prism-big" @click="handlepause999()"></div>
                            </div>
                            <img :src="item.url" style="height: 324px" alt="轮播图" v-if="item.type === 1" />
                        </el-carousel-item>
                    </el-carousel>
                    <div class="rightArrow">
                        <!-- <img src="@/assets/mySwiper/right.png" @click="arrowClick('right')" /> -->
                        <svg-icon class="swpright" style="font-size: 24px" icon-file-name="swpright" @click="arrowClick('right', 1)" />
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="loading"></div>
        <div v-if="no_data" class="noData">
            <img src="@/assets/nodata.png" alt="" />
        </div>
    </div>
</template>

<script>
import { gameDetailss } from '@/api/url'
export default {
  created () {
    window.handleplay = this.handleplay
    window.handlepause = this.handlepause
    window.handleended = this.handleended
    window.handledurationchange = this.handledurationchange
    window.handleoncanplay = this.handleoncanplay
  },
  data () {
    return {
      interval: NaN, //轮播时常
      autoplay: true, //自动播放
      no_data: false,
      specImages: '',
      translateX: 0,
    };
  },
  mounted () {
    this.$EventBus.$on('GamedetailsList', (data) => {
      // console.log(data.id);
      this.specImages = ''
      this.gameDetailss(data.id)
    })
  },
  methods: {
    // 获取dom视频
    getVidDur (index) {
      const pause = this.$refs.ref.querySelectorAll('.myVideo')
      if (this.specImages[index].url.indexOf("mp4") != -1) {
        pause.forEach(item => {
          item.currentTime = 0
          item.play()
        })
        this.autoplay = false
      } else {
        pause.forEach(item => {
          item.pause()
        })
      }
    },
    // oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
    handleoncanplay () {
      const pause = this.$refs.ref.querySelectorAll('.myVideo')
      pause.forEach(item => {
        item.play()
      })
      this.autoplay = false
    },
    // onended 事件在视频/音频（audio/video）播放结束时触发。
    handleended () {
      this.autoplay = true
      this.interval = 3000;
    },
    // ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。
    handledurationchange () {
      this.autoplay = false
    },
    // onpause 事件在视频/音频（audio/video）暂停时触发。
    handlepause () {
      this.autoplay = true
      const target = event.target
      const className = target.className
      let palyBtn
      if (className === 'myVideo') {
        palyBtn = target.nextSibling
      }
      palyBtn.style.display = 'block'
    },
    // onplay 事件在视频/音频（audio/video）开始播放时触发。
    handleplay () {
      const target = event.target
      const className = target.className
      let playBtn
      if (className === 'myVideo') {
        playBtn = target.nextSibling
      } else {
        playBtn = target
        const video = target.previousSibling
        video.play()
      }
      playBtn.style.display = 'none'
    },
    //   将轮播图指示器渲染成图片
    indicatorToimage: function () {
      var a = document.querySelectorAll(".el-carousel__button");
      for (let i in this.specImages) {
        //添加一个img
        let img = document.createElement('img');
        img.src = this.specImages[i].url.replace('mp4', 'jpg');
        //加到button里面
        a[i].appendChild(img);
      }
    },
    // 查询游戏详情
    async gameDetailss (id) {
      try {
        const res = await gameDetailss(id)
        this.specImages = ''
        if (res.data.code === 200) {
          this.specImages = res.data.data.merGameImages// 轮播图列表
          this.specImages.sort((p1, p2) => {
            return p2.type - p1.type
          })
          if (this.specImages.length === 0) {
            this.no_data = true
          }
        } else {
          console.log(res.data.msg)
        }
      } catch (err) {
        console.log(err)
      }
      // setTimeout(() => {
      this.$nextTick(() => {
        if (this.specImages.length !== 0) {
          this.indicatorToimage()
        }
      })
      // }, 400);
    },
    // 点击上一张还是下一张
    arrowClick (val, direction) {
      const containerWidth = this.$el.querySelector('.el-carousel').offsetWidth;
      const contentWidth = this.$el.querySelector('.el-carousel__indicators--outside').offsetWidth;
      // console.log(containerWidth);
      // console.log(contentWidth);
      const step = containerWidth / 2;
      // if (direction === -1 && this.translateX < 0) {
      //   this.translateX += step;
      // } else if (direction === 1 && this.translateX > containerWidth - contentWidth) {
      //   this.translateX -= step;
      // }
      if (val === 'right') {
        this.$refs.cardShow.next()
        if (direction === 1 && this.translateX > containerWidth - contentWidth) {
          this.translateX -= step;
          window.document.getElementsByClassName('el-carousel__indicators--outside')[0].style.transform = "translateX(" + this.translateX + "px)";
          window.document.getElementsByClassName('el-carousel__indicators--outside')[0].style.transition = "all 1s";
        }
      } else {
        this.$refs.cardShow.prev()
        if (direction === -1 && this.translateX < 0) {
          this.translateX += step;
          document.getElementsByClassName('el-carousel__indicators--outside')[0].style.transform = "translateX(" + this.translateX + "px)";
          document.getElementsByClassName('el-carousel__indicators--outside')[0].style.transition = "all 1s";
        }
      }
    },
    // 暂停视频
    handlepause999 () {
      // console.log(event.target.previousSibling.previousSibling);
      const target = event.target.previousSibling.previousSibling
      target.pause()
      // console.log(target);
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  beforeDestroy () {
    this.$EventBus.$off('GamedetailsList')
  }
}
</script>


<style lang="less" scoped>
/* 轮播图样式 */
/deep/.el-carousel__container {
    position: relative;
    height: 316px;
    background: rgba(0, 0, 0, 0);
}
.preview-wrap {
    position: relative;
}
.preview-wrap .el-carousel {
    width: 656px;
    height: 395px;
    overflow: hidden !important;
    background: #222223;
}
.preview-wrap /deep/.el-carousel__button {
    width: 100px;
    height: 60px;
    border-radius: 2px;
}
.preview-wrap /deep/.el-carousel__button img {
    height: 60px;
    border-radius: 2px;
}
.leftArrow {
    position: absolute;
    z-index: 99;
    top: 316px;
    left: 0px;
    width: 20px;
    background: #222223;
    height: 79px;
    padding-top: 26px;
    .swpleft {
        color: #a4a4a4;
        &:hover {
            color: #f1e4c8;
        }
    }
}
.rightArrow {
    position: absolute;
    z-index: 99;
    left: 636px;
    top: 316px;
    width: 20px;
    background: #222223;
    height: 79px;
    padding-top: 26px;
    .swpright {
        color: #a4a4a4;
        &:hover {
            color: #f1e4c8;
        }
    }
}
/deep/.el-carousel__indicator.is-active button {
    position: relative;
    content: '';
    opacity: 1;
}
/deep/.el-carousel__indicator.is-active button img {
    border-radius: 2px;
    border: 2px solid #ffa031;
    opacity: 1 !important;
}
/deep/.el-carousel__indicator.is-active {
    opacity: 1 !important;
}
/deep/.el-carousel__indicator.is-active button::before {
    box-sizing: content-box;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -12px;
    right: 44px;
    padding: 0;
    border-bottom: 6px solid #ffa031;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    display: block;
    content: '';
}
/deep/.el-carousel__indicators--outside button {
    background-color: #0c0c0c;
    opacity: 1;
}
/deep/.el-carousel__indicators--outside {
    text-align: left;
    // width: 1020px;
    height: 79px;
    background-color: #222223;
    padding: 0 0 0 10px;
    position: absolute;
    display: flex;
    top: 316px;
    left: 0px;
}
/deep/.el-carousel__indicator--horizontal {
    height: 79px;
    padding: 10px 0px;
    margin-left: 12px;
}
.prism-big-play-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 47%;
    width: 62px;
    height: 62px;
    z-index: 101;
    background: url('@/assets/mySwiper/autoplay_1.png') no-repeat;
    background-size: contain;
    &:hover {
        background: url('@/assets/mySwiper/autoplay_2.png') no-repeat;
    }
}
.prism-big {
    width: 656px;
    height: 316px;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 100;
}
.loading {
    width: 656px;
    height: 395px;
    background-color: #120d03;
}
.noData {
    width: 656px;
    height: 395px;
    position: relative;
    top: -100%;
}
// 走马灯淡入淡出效果
.el-carousel__item.is-animating {
    // transition: all 0.3s;
    transition: opacity 0.6s linear;
}
</style>
